/* eslint-disable */
import react from '@vitejs/plugin-react';
// import legacyPlugin from '@vitejs/plugin-legacy';
import * as path from 'path';
import macrosPlugin from 'vite-plugin-babel-macros';
import env from 'vite-plugin-env-compatible';
import usePluginImport from 'vite-plugin-importer';
import svgrPlugin from 'vite-plugin-svgr';
// import reactCssModule from "vite-plugin-react-css-modules";
// const generateScopedName = "[name]__[local]___[hash:base64:5]";

// @see https://cn.vitejs.dev/config/
export default ({ command, mode }) => {
  let rollupOptions = {
    output: {
      chunkFileNames: 'static/js/[name]-[hash].js',
      entryFileNames: 'static/js/[name]-[hash].js',
      assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
    },
  };

  let optimizeDeps = {};

  let alias = [
    {
      find: '@',
      replacement: path.resolve(__dirname, 'src'),
    },
    {
      find: 'moment',
      replacement: 'dayjs',
    },
    /**
     * esm 工具, 移除 @import~
     * 参考: https://github.com/ant-design/pro-components/issues/1933#issuecomment-817073234
     * */
    { find: /^~/, replacement: '' },
  ];

  let proxy = {
    '/dev_proxy_xxx': {
      target: 'http://xxx.xxxx.com',
      secure: true,
      changeOrigin: true,
      cookieDomainRewrite: 'xxx.xxxx.com',
      pathRewrite: {
        '^/dev_proxy_xxx': '',
      },
    },
  };

  let define = {
    'process.env.APP_IS_LOCAL': '"true"',
  };

  let esbuild = {
    jsxFactory: 'jsx',
    jsxInject: `import { jsx } from '@emotion/react';`,
  };

  return {
    base: './', // index.html文件所在位置
    root: './', // js导入的资源路径，src
    resolve: {
      alias,
    },
    define: define,
    server: {
      host: '0.0.0.0',
      port: 5001,
      // 代理
      proxy,
    },
    build: {
      target: 'es2015',
      minify: 'esbuild', // 是否进行压缩,boolean | 'terser' | 'esbuild',默认使用terser
      manifest: false, // 是否产出maifest.json
      sourcemap: false, // 是否产出soucemap.json
      outDir: 'build-vite', // 产出目录
      assetsDir: 'static/img/',
      rollupOptions,
    },
    esbuild,
    optimizeDeps,
    envPrefix: 'REACT_APP_',
    plugins: [
      /**
       * 把 import.meta.env 转成 process.env
       * 参考: https://github.com/IndexXuan/vite-plugin-env-compatible
       */
      env(),
      // 不用 vite 打包, 这个插件不需要
      // legacyPlugin({
      //     targets: ['Android > 39', 'Chrome >= 60', 'Safari >= 10.1', 'iOS >= 10.3', 'Firefox >= 54', 'Edge >= 15'],
      // }),
      /**
       * twin.macro + emotion
       * */
      macrosPlugin(),
      /**
       * vite 官方提供, The all-in-one Vite plugin for React projects.
       * if jsxRuntime: 'automatic', 使用 jsxImportSource: 'react' 发给 @babel/plugin-transform-react-jsx 完成操作
       * if jsxRuntime: 'classic', 合并 import React from 'react' + esbuild.jsxInject
       * 参考: https://github.com/vitejs/vite/tree/main/packages/plugin-react
       * https://github.com/vitejs/vite/blob/26f93abc5f56ad2db48f0bf1ae609235e44a1647/packages/plugin-react/src/index.ts#L32
       * https://github.com/vitejs/vite/blob/26f93abc5f56ad2db48f0bf1ae609235e44a1647/packages/plugin-react/src/index.ts#L189
       * */
      react({
        jsxRuntime: 'classic',
      }),
      /**
       * vite 里使用 react-css-module
       * 参考: https://github.com/fchengjin/vite-plugin-react-css-module
       * https://github.com/gajus/babel-plugin-react-css-modules
       * */
      // reactCssModule({
      //   generateScopedName,
      //   filetypes: {
      //     ".less": {
      //       syntax: "postcss-less",
      //     },
      //   },
      // }),
      /**
       * create-react-app 已内置 svgr, vite 还是要有
       * 参考: https://github.com/pd4d10/vite-plugin-svgr
       * */
      svgrPlugin(),
      /**
       * 按需加载的工具, 同 babel-plugin-import
       * 参考: https://github.com/ajuner/vite-plugin-importer
       * https://github.com/ant-design/babel-plugin-import
       */
      usePluginImport({
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
      }),
      usePluginImport({
        libraryName: '@ant-design/icons',
        libraryDirectory: 'es/icons',
        camel2DashComponentName: false,
        customName: (transformedMethodName) => {
          if (transformedMethodName === 'default') {
            return '@ant-design/icons/es/components/Icon';
          }
          return `@ant-design/icons/es/icons/${transformedMethodName}`;
        },
      }),
      /**
       * 能有效减少网络请求
       * 使用方法 import { BasicLayout } from '@ant-design/pro-layout';
       * */
      usePluginImport({
        libraryName: '@ant-design/pro-table',
        libraryDirectory: 'es',
        camel2DashComponentName: false,
      }),
    ],
    css: {
      // modules: {
      //   generateScopedName
      // },
      preprocessorOptions: {
        less: {
          // 支持内联 JavaScript
          javascriptEnabled: true,
        },
      },
    },
  };
};
